<template>
  <view class="profile-page">
    <view class="home-page ">
      <!-- 顶部背景区域 -->
      <view class="header">
        <image class="background-image" src="/static/images/bg-image.jpg"></image>
        <!-- 遮罩区域 -->
        <view class="shadow-class">
          <view class="user-info">
            <image class="avatar" :src="isLoggedIn ? userInfo.avatar : '/static/images/avatar-default.png'"></image>
            <view class="info">
              <view class="name" v-if="isLoggedIn">
                {{ userInfo.name }} <text class="gender">{{ userInfo.gender }}</text>
              </view>
              <view class="details" v-if="isLoggedIn">
                ID: <text class="user-id">{{ userInfo.id }}</text>
              </view>
              <button class="login-btn" v-else @click="login">微信授权登录</button>
            </view>
            <button class="edit-btn" v-if="isLoggedIn" @click="editProfile">编辑</button>
          </view>
          <!-- 简介区域 -->
          <view class="summary" v-if="isLoggedIn">
            <view class="stats">
              <text class="stat-item">{{ userInfo.following }} <text class="stat-label">关注</text></text>
              <text class="stat-item">{{ userInfo.followers }} <text class="stat-label">粉丝</text></text>
            </view>
            <view class="bio">{{ userInfo.bio || "给球友们简单介绍一下自己吧" }}</view>
          </view>
        </view>
      </view>
    </view>


    <!-- 实名参赛卡模块 -->
    <view class="auth-card" v-if="isLoggedIn" @click="showDialog">
      <text class="auth-title">实名参赛卡</text>
      <text class="auth-desc">您的实名参赛卡已认证</text>
    </view>

    <!-- 弹出对话框 -->
    <u-popup :show="show" @close="close" @open="open" mode="center"
      custom-style="padding: 0 30px; border-radius: 10px;">
      <view class="dialog-content">
        <text class="dialog-title">请填写真实姓名，方便参与赛事</text>

        <view class="input-group">
          <text class="input-label">真实姓名</text>
          <u-input v-model="realName" placeholder="请输入真实姓名" clearable class="input-field"></u-input>
        </view>

        <view class="info-text">
          <text>您的个人信息仅提供给需要的赛事举办方，百佳高尔夫不会未经您的同意泄露您的资料。</text>
        </view>

        <view class="buttons">
          <u-button class="cancel-btn" @click="close">取消</u-button>
          <u-button class="confirm-btn" @click="confirmDialog">确定</u-button>
        </view>
      </view>
    </u-popup>

    <!-- 数据展示区 -->
    <view class="data-grid" v-if="isLoggedIn">
      <view class="data-item" @click="goGamesPlayed">
        <view class="title-box">
          <text class="cn-title">球局记录</text>
          <text class="en-title">Games Played</text>
        </view>
        <view class="bottom-box">
          <text class="value">{{ userInfo.gamesPlayed || '--' }}</text>
          <text class="arrow">></text>
        </view>
      </view>

      <view class="data-item" @click="goCoursesPlayed">
        <view class="title-box">
          <text class="cn-title">打过球场</text>
          <text class="en-title">Courses Played</text>
        </view>
        <view class="bottom-box">
          <text class="value">{{ userInfo.coursesPlayed || '--' }}</text>
          <text class="arrow">></text>
        </view>
      </view>

      <view class="data-item" @click="goGamesWatched">
        <view class="title-box">
          <text class="cn-title">观赛历史</text>
          <text class="en-title">Games Watched</text>
        </view>
        <view class="bottom-box">
          <text class="value">{{ userInfo.gamesWatched || '--' }}</text>
          <text class="arrow">></text>
        </view>
      </view>
    </view>
    <!-- 分割线下面新增的UI（可直接粘贴到 <u-divider ...></u-divider> 后面） -->
    <view class="handicap-grid" v-if="isLoggedIn">
      <view class="handicap-item">
        <text class="title">差点</text>
        <text class="value">18.5</text>
        <text class="desc">超69%球友</text>
      </view>
      <view class="handicap-item">
        <text class="title">平均杆数</text>
        <text class="value">90</text>
        <text class="desc">超70.6%球友</text>
      </view>
      <view class="handicap-item">
        <text class="title">最佳杆数</text>
        <text class="value">89</text>
        <text class="desc">超66.4%球友</text>
      </view>
    </view>
    <chart-two :scoreData="last10Scores" />

    <!-- <dynamic-chart :left-list="leftList" 
      @change="handleChange" /> -->
    <u-divider text="分割线" :dashed="true"></u-divider>

    <chart-card :leftList="leftList" />

    <u-divider text="分割线" :dashed="true"></u-divider>

    <tabbar currentTab="userCenter"></tabbar>

  </view>
</template>

<script>
import tabbar from '@/components/tabbar/tabbar'
import chartCard from './components/ChartCard.vue'
import ChartTwo from './components/ChartTwo.vue';
import { wxNavigateTo } from '@/utils/wxApi'

export default {
  components: {
    tabbar, ChartTwo, chartCard
  },
  data() {
    return {
      isLoggedIn: true, // 是否登录
      show: false, // 控制u-popup显示
      realName: '', // 真实姓名
      idNumber: '', // 身份证号
      userInfo: {
        avatar: "",
        name: "大海",
        gender: "♂",
        id: "11115598",
        bio: "",
        following: 1,
        followers: 0,
        gamesPlayed: 0,
        coursesPlayed: 0,
        gamesWatched: 2,
      },
      // 左侧列表，每项都包含 chartData
      leftList: [
        {
          title: 'Par 3 av. Score',
          subtitle: '三杆洞单场平均杆',
          color: '#74c050',
          chartData: {
            categories: ['第1场', '第2场', '第3场'],
            series: [
              { name: 'Par3 平均杆', data: [4.2, 4.5, 3.9] }
            ],
          },
        },
        {
          title: 'Par 4 av. Score',
          subtitle: '四杆洞单场平均杆',
          color: '#f37b1d',
          chartData: {
            categories: ['第1场', '第2场', '第3场'],
            series: [
              { name: 'Par4 平均杆', data: [5.5, 5.7, 6.0] }
            ],
          },
        },
        {
          title: 'Par 5 av. Score',
          subtitle: '五杆洞单场平均杆',
          color: '#409eff',
          chartData: {
            categories: ['第1场', '第2场', '第3场'],
            series: [
              { name: 'Par5 平均杆', data: [6.3, 6.8, 5.9] }
            ],
          },
        },
      ],
      // 最近10场成绩
      last10Scores: [89, 92, 95, 88, 100, 99, 85, 78, 120, 90]
    };
  },
  methods: {
    // 打开对话框
    showDialog() {
      this.show = true;
    },
    // 关闭对话框
    close() {
      this.show = false;
    },
    // 提交实名信息
    confirmDialog() {
      if (this.realName) {
        // 这里可以添加提交实名信息的处理逻辑
        uni.showToast({
          title: '实名信息已提交',
          icon: 'success'
        });
        this.close(); // 提交后关闭对话框
      } else {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        });
      }
    },
    // 观察历史
    goGamesWatched() {
      wxNavigateTo(`/pages/userCenter/observeHis/index`)

    },
    // 球局记录
    goGamesPlayed() {
      wxNavigateTo(`/pages/userCenter/gameRecord/index`)
    },
    // 打过球场
    goCoursesPlayed() {
      wxNavigateTo(`/pages/userCenter/playedCourse/index`)
    },
    // 微信授权登录
    login() {
      uni.showToast({
        title: "模拟登录成功",
        icon: "none",
      });
      // 模拟登录后数据更新
      this.isLoggedIn = true;
      this.userInfo = {
        avatar: "/static/images/avatar.jpg",
        name: "大海",
        gender: "♂",
        id: "11115598",
        bio: "热爱高尔夫运动",
        following: 5,
        followers: 20,
        gamesPlayed: 10,
        coursesPlayed: 8,
        gamesWatched: 4,
      };
    },
    // 编辑资料
    editProfile() {
      wxNavigateTo(`/pages/userCenter/profile/index`)
    },
    handleChange(index) {
      // 当点击左侧的某一行时触发
      console.log('切换到索引：', index);


    },
  },
};
</script>

<style scoped>
/* 页面整体布局 */
.profile-page {
  display: flex;
  flex-direction: column;
  /* height: calc(100% - 200rpx); */
  background-color: #121212;
  /* overflow-y: scroll; */
  padding-bottom: 200rpx;
}

/* 顶部背景区域 */
.header {
  position: relative;
  height: 260px;
}

.background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 遮罩 */
.shadow-class {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 60%);
  position: absolute;
  bottom: 0px;
  padding: 10px 15px;
  color: white;
  width: 100%;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.info {
  margin-left: 12px;
}

.name {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.gender {
  font-size: 12px;
  color: #ccc;
}

.details {
  font-size: 12px;
  color: #bbb;
}

.user-id {
  color: #f3c623;
}

.login-btn {
  padding: 8px 16px;
  background-color: #1aad19;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
}

/* 编辑资料按钮 */
.edit-btn {
  position: absolute;
  right: 45px;
  width: 60px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border: 1px solid #fff;
  border-radius: 10px;
  font-size: 10px;
  color: #fff;
  background: rgba(255, 255, 255, 0.3);
}

/* 简介区域 */
.summary {
  margin-top: 10px;
}

.stats {
  display: flex;
  margin-bottom: 5px;
}

.stat-item {
  font-size: 12px;
  color: #fff;
  margin-right: 10px;
}

.stat-label {
  font-size: 10px;
  color: #ddd;
}

.bio {
  font-size: 12px;
  color: #eee;
}

/* 实名参赛卡 */
.auth-card {
  padding: 10px;
  background-color: #1f1f1f;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  text-align: center;
  color: #fff;
  margin: 0 20px;
}

.auth-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}

.auth-desc {
  font-size: 12px;
  color: #aaa;
}

/* 数据展示区 */
/* 修改后的样式 */
.data-grid {
  margin: 10px 16px 0px 16px;
  display: flex;
  justify-content: space-between;
}

.data-item {
  flex: 1;
  background-color: #2b2b2b;
  /* 根据实际UI可调整 */
  border-radius: 8px;
  padding: 12px;
  margin: 0 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 70px;
  /* 根据UI高度自定 */
}

/* 上方标题 */
.title-box {
  line-height: 18px;
}

.cn-title {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.en-title {
  color: #999;
  font-size: 10px;
}

/* 下方数值与箭头 */
.bottom-box {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.value {
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  margin-right: 10rpx;
}

.arrow {
  color: #999;
  font-size: 16px;
}

/* 图表占位 */
.chart {
  margin: 20px 16px;
  background-color: #1f1f1f;
  padding: 16px;
  border-radius: 8px;
}

.chart-placeholder {
  text-align: center;
  color: #aaa;
}

/* 新增UI所需样式，和原有 .data-grid / .data-item 结构类似 */
.handicap-grid {
  margin: 10px 16px;
  display: flex;
  justify-content: space-between;
}

.handicap-item {
  flex: 1;
  text-align: center;
  margin: 0 4px;
  background-color: #1f1f1f;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.handicap-item .value {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  line-height: 22px;
}

.handicap-item .title {
  font-size: 12px;
  color: #aaa;
  margin-top: 4px;
}

.handicap-item .desc {
  font-size: 10px;
  color: #74c050;
  /* 根据需要可自定义配色 */
  margin-top: 2px;
}

/* 弹框内容的样式 */
.dialog-content {
  padding: 20px 0;
}

.dialog-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.input-group {
  margin-bottom: 15px;
}

.input-label {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  margin-right: 10px;
}

.u-input {
  background-color: #f4f4f4;
  color: #333;
  border-radius: 8px;
  padding: 10px;
}

.info-text {
  font-size: 12px;
  color: #888;
  margin-bottom: 20px;
  text-align: center;
}

.buttons {
  display: flex;
  justify-content: space-between;
}

.cancel-btn,
.confirm-btn {
  width: 45%;
  font-size: 16px;
  padding: 10px;
}

.cancel-btn {
  background-color: #f4f4f4;
  color: #666;
  border: 1px solid #ddd;
}

.confirm-btn {
  background-color: #74c050;
  color: white;
}

/* 弹框居中并设定左右间距 */
.u-popup {
  padding-left: 30px;
  padding-right: 30px;
  border-radius: 10px;
}
</style>